<template>
  <div>
    <div id="title">角色权限</div>
    <div id="box">
      <div id="left">
        <el-tree   default-expand-all
        :data="roles" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </div>
      <div id="right">
          <div class="cell"  v-for="item in permission" :key="item.id">
              <div class="title1">
                  {{ item.name }} 
              </div>
              <div style="width: 80%; ">
                <div class="cell2" v-for="item2 in item.permissions" :key="item2.id">
                  <div class="title2"> 
                    <el-checkbox @change="change2(item2)" :value="isAllChecked(item2)">{{ item2.name }} :{{ item2.id }} </el-checkbox>
                  </div>
                  <div class="box3">
                    <div class="cell3 title3" v-for="item3 in item2.permissions" :key="item3.id">
                      <el-checkbox @change="change(item3.id)" v-model="item3.checked"> {{ item3.name }} : {{ item3.id }}</el-checkbox>
                     
                   </div>
                </div>
           
              </div>

              </div>
          </div>

      </div>
    </div>
   
  </div>
</template>

<script>
import { sysRoles,sysPermission,sysPermissionCheck,sysPermissionCheckParent } from '@/api/role'
export default {
  data() {
    return {
      curentRoleId:null,
      roles:[],
      permission:[],
      defaultProps: {
        children: 'roles',
        label: 'name'
      }
    }
  },

  mounted() {
    let that = this;
    sysRoles().then(res => {
      that.roles = res.data.data;
    })
  },
  methods:{
    handleNodeClick(data) {
      this.curentRoleId = data.id;
      let that = this;
      sysPermission(data.id).then(res=>{
        that.permission = res.data.data;
      })
    },
    isAllChecked(item){
      let legnth  = 0;
      for(let i = 0;i<item.permissions.length;i++){
        if(item.permissions[i].checked){
          legnth++;
        }else{
          return false;
        }
      }
      return  item.permissions.length == legnth;
    },
    change(id){
      console.log(id,this.curentRoleId);
      let that = this;
      sysPermissionCheck({
        pid:id,
        rid:that.curentRoleId
      }).then(res=>{
        console.log(res.data);
      });
    },
    change2(item){
      console.log(item.id,this.curentRoleId);
      let that = this;
      sysPermissionCheckParent({
        pid:item.id,
        rid:that.curentRoleId,
        checked:!that.isAllChecked(item)
      }).then(res=>{
        console.log(res.data);
        sysPermission(that.curentRoleId).then(res=>{
          that.permission = res.data.data;
        })

      });
    }
  }

}
</script>

<style scoped>
.title1{
  width: 20%;
  border: 1px solid black;
}
#title{
  line-height: 40px;
}
#box{
  display: flex;
  height: calc(100vh - 40px);
}
#left{
  width: 20vw;
  /* background-color: gray; */
}
#right{
  margin-left: 10px;
  width: calc(80vw - 20px);
}
.cell{
  display: flex;
}

.cell2{
  display: flex;
}
.cell2>div{
  width: 100%;
  border: 1px solid black;
}
.cell3{
  margin-left: 10px;
}
.box3{
  display: flex;
  flex-wrap: wrap;
 
}
.title1,.title2,.title3{
  padding: 10px;
}
.title1,.title2{
  display: flex;
  justify-content: left;
  align-items: center;
}
</style>